<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维修看板</title>
    <link rel="stylesheet" type="text/css" href="/resources/layui/css/layui.css">
    <style>
        .layui-fluid {
            padding: 15px;
        }

        div {
            display: block;
        }

        #LAY-component-grid-list .demo-list .demo .layui-card {
            height: 190px;
        }

        html {
            background-color: #f2f2f2;
            color: #666;
        }

        .layui-card {
            margin-bottom: 15px;
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }

        .layui-col-sm4 {
            width: 33.33333333%;
        }

        .layui-col-sm8 {
            width: 66.66666666%;
        }

        .warm {
            background-color: #FF5722 !important;
        }

        .success {
            background-color: #5FB878;
        }

        .error {
            background-color: #0e9aef;
        }
        .montherror {
            background-color: #0bc5cd;
        }

        .required {
            background-color: #1b6d85;
        }

        .left_word {
            color: #fff !important;
            text-align: center;
            font-size: 18px;
        }

        .layadmin-backlog .layadmin-backlog-body {
            display: block;
            padding: 10px 15px;
            background-color: #FF5722;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layadmin-backlog-body p cite {
            font-style: normal;
            font-size: 40px;
            font-weight: 300;

            text-align: center;
        }

        .layadmin-backlog-body {
            text-align: center;
        }

        .layadmin-backlog-body p {
            padding-top: 5%;
        }

        .layui-this {
            padding-top: 4%;
        }

        .today {
            color: #FF5722;
        }

        .todayAB {
            color: #5FB878;
        }

        .week {
            color: #0e9aef;
        }
        .month {
            color: #0f0f0f;
        }

        .weekAb {
            color: #1b6d85;

        }

        .layui-hide {
            display: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0px;
        }
        .layui-table-tool {
            min-height: 0;
            line-height: 0;
            position: relative;
            z-index: 890;
            width: 100%;
            padding: 0 0;
        }
        .layui-form{
            margin-top: 0;
        }

        table,tbody,tfoot,thead,tr,th,td {
            margin:0;
            padding:0;
            outline:0;
            font-size:100%;
            vertical-align:baseline;
            background:transparent;
            border-collapse:collapse;
            border-spacing:0;
            border:0px;
        }
        .tablebox {
            width:100%;
            min-height: 503px;
            /*min-height: 500%;*/
            overflow:hidden;
        }
        .tablebox table {
            width:100%;
        }
        .tablebox table th,.tablebox table td {
            font-size:20px;
            text-align:center;
            line-height:36px;
        }
        .tablebox table th {
            color:#2584e3;
            background-color:#f6f6f6;
        }
        .tablebox table td img {
            display:inline-block;
            vertical-align:middle;
        }
        .tablebox table tbody tr:nth-child(even) {
            background-color:#f6f6f6;
        }
        .tablebox.table_md table td,.tablebox.table_md table th {
            line-height:40px;
        }
        .title{
            text-align: center;
        }
        .date{
            text-align: right;
        }



    </style>

</head>
<body>
<div class="layui-col-sm12">
    <div class="layui-card">
        <div class="layui-card-header">
            <p class="layui-col-md4 enterprise" id="enterprise"></p>
            <p class="layui-col-md4 title">维修看板</p>
            <p class="layui-col-md4 date"></p>
        </div>
        <div class="layui-fluid" id="LAY-component-grid-list">
            <div class="layui-row layui-col-space10 demo-list">
                <div class="layui-col-sm4 demo">
                    <!-- 填充内容 -->
                    <div class="layui-card">
                        <div class="layui-card-header warm">
                            <p class="left_word">今日报修</p>

                        </div>
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>总数</h3>
                                    <p><cite class="today" id="todayNumber"></cite></p>
                                </div>
                            </li>
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>完成率</h3>
                                    <p><cite class="today" id="todayPercent"></cite></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header success">
                            <p class="left_word">今日AB类报修</p>
                        </div>
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>总数</h3>
                                    <p><cite class="todayAB" id="todayAB"></cite></p>
                                </div>
                            </li>
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>完成率</h3>
                                    <p><cite class="todayAB" id="todayABPercent"></cite></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header error">
                            <p class="left_word">本周报修</p>
                        </div>
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>总数</h3>
                                    <p><cite class="week" id="weekNumber"></cite></p>
                                </div>
                            </li>
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>完成率</h3>
                                    <p><cite class="week" id="weekPercent"></cite></p>
                                </div>
                            </li>
                        </ul>
                    </div>


                    <div class="layui-card">
                        <div class="layui-card-header required">
                            <p class="left_word">本周AB类报修</p>
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs6">
                                    <div class="layadmin-backlog-body ">
                                        <h3>总数</h3>
                                        <p><cite class="weekAb" id="weekAB"></cite></p>
                                    </div>
                                </li>
                                <li class="layui-col-xs6">
                                    <div class="layadmin-backlog-body ">
                                        <h3>完成率</h3>
                                        <p><cite class="weekAb" id="weekABPercent"></cite></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>


                    <!-- 新增月数据总计 -->
                    <div class="layui-card">
                        <div class="layui-card-header montherror">
                            <p class="left_word">本月维保报修</p>
                        </div>
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>总数</h3>
                                    <p><cite class="month" id="monthNumber"></cite></p>
                                </div>
                            </li>
                            <li class="layui-col-xs6">
                                <div class="layadmin-backlog-body ">
                                    <h3>完成率</h3>
                                    <p><cite class="month" id="monthPercent"></cite></p>
                                </div>
                            </li>
                        </ul>
                    </div>



                </div>


                <div class="layui-col-sm8" id="tableList">
                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
                            <div class="layui-card-header error">
                                <p class="left_word">未完成工单</p>
                            </div>


                            <div class="tablebox" >
                                <table id="tableId">
                                    <thead id="thread">
                                    <tr>
                                        <th>报修内容</th>
                                        <th>等级</th>
                                        <th>专业</th>
                                        <th>报修区域</th>
                                        <th>报修来源</th>
                                        <th>状态</th>
                                        <th>报修时间</th>
                                        <th>接单人</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody></table>
                            </div>
                        </div>
                    </div>

                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
                            <div class="layui-card-header error">
                                <p class="left_word">AB类未完成工单</p>
                            </div>
                            <div class="tablebox" >
                                <table id="tableAB">
                                    <thead id="threadAB">
                                    <tr>
                                        <th>报修内容</th>
                                        <th>等级</th>
                                        <th>专业</th>
                                        <th>报修区域</th>
                                        <th>报修来源</th>
                                        <th>状态</th>
                                        <th>报修时间</th>
                                        <th>接单人</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody></table>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</body>
<script src="/resources/layui/layui.js"></script>
<script src="/resources/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/dashboard.js"></script>
<script>
    $(document).ready(function () {
            getParam();
    })

</script>



</html>